import {  useEffect, useRef } from "react";
import * as Cesium from "cesium";
import economize from "@/assets/json/economize.json";
import "./Map.less";

const tdtImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
  url:
    "http://t0.tianditu.gov.cn/img_w/wmts?tk=" + import.meta.env.VITE_TDT_TOKEN,
  layer: "img",
  style: "default",
  tileMatrixSetID: "w",
  format: "tiles",
  credit: "天地图全球影像服务",
  maximumLevel: 18,
  subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
});

const tdtAnnotationProvider = new Cesium.WebMapTileServiceImageryProvider({
  url:
    "http://t0.tianditu.gov.cn/cia_w/wmts?tk=" + import.meta.env.VITE_TDT_TOKEN,
  layer: "cia",
  style: "default",
  tileMatrixSetID: "w",
  format: "tiles",
  credit: "天地图全球影像服务",
  maximumLevel: 18,
  subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
});

function Map() {

  let mapContainer = useRef<HTMLDivElement>(null);
  useEffect(() => {
    // 初始化 Viewer
    const viewer = new Cesium.Viewer(mapContainer.current!, {

      // 高频配置

      //关闭左下角的动画控件（时间轴播放/暂停/速度调节）
      animation: false,
      //隐藏底图切换器（选择影像/地形图层）
      baseLayerPicker: false,
      //关闭右下角的全屏按钮
      fullscreenButton: false,
      //关闭右上角的地名搜索框（支持 Bing、OpenStreetMap 等）
      geocoder: false,
      //关闭首页按钮（恢复默认视角）
      homeButton: false,
      //关闭点击要素后的信息框（显示属性信息）
      infoBox: false,
      //关闭 2D/3D/Columbus 视图模式切换按钮
      sceneModePicker: false,
      //关闭选中要素的绿色边框
      selectionIndicator: false,
      //关闭时间轴控件（用于时间动态数据）
      timeline: false,
      //关闭帮助按钮
      navigationHelpButton: false,

      // 低频配置

      //自定义星空背景（支持关闭或替换图片）如果显示星空不配置即可
      // skyBox: false,
      //控制大气层效果（蓝天/日出日落）
      skyAtmosphere: false,
      //控制地形是否投射/接收阴影
      terrainShadows: Cesium.ShadowMode.DISABLED,
      //是否启用无序半透明渲染（优化复杂半透明图层性能）
      orderIndependentTranslucency: true,
      //设置目标帧率（如 60）
      targetFrameRate: 60,
      //设置地图投影方式（如 Geographic）
      mapProjection: new Cesium.GeographicProjection(),

      // 性能优化

      //控制是否使用默认渲染循环（true 自动更新帧率，false 手动控制）
      useDefaultRenderLoop: true,
      //启用按需渲染模式（仅在相机移动时渲染，节省资源）
      requestRenderMode: true,
    });
    
    //隐藏版本信息
    // viewer.cesiumWidget.creditContainer.style.display = "none";
    (viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";
    //影像地图底图
    viewer.imageryLayers.addImageryProvider(tdtImageryProvider);
    //影像地图注记
    viewer.imageryLayers.addImageryProvider(tdtAnnotationProvider);

    //添加包围国家json
    const dataSource = Cesium.GeoJsonDataSource.load(economize, {
      // 样式配置（可选）
      stroke: Cesium.Color.BLUE, // 边界颜色
      strokeWidth: 2, // 边界宽度
      // 是否填充
      // fill: Cesium.Color.RED.withAlpha(0),
      //空白枚举颜色
      fill: Cesium.Color.TRANSPARENT,
    });
    viewer.dataSources.add(dataSource);

    // 设置默认视角为天津
    viewer.camera.flyTo({
      // 天津市区
      //矩形区域飞入
      // destination: Cesium.Rectangle.fromDegrees(117.15, 39.03, 117.25, 39.13),
      //定点飞入
      destination: Cesium.Cartesian3.fromDegrees(117.15, 39.03, 1000000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: 0,
      },
      duration: 0,
    });
    return () => {
      if (!viewer.isDestroyed()) {
        viewer.destroy();
      }
    };
  }, []);

  return (
    <>
      <div className="map">
        <div
          ref={mapContainer}
          className="map-container"
          id="map-container"
        ></div>
      </div>
    </>
  );
}

export default Map;
